<template>
  <l-data-panel v-if="data._isInit" :label="config.title">
    <template #title>
      <div
        :key="index"
        v-for="(item, index) in config.dataList"
        :class="[
          'learun-bi-panel-title-item',
          { active: index == showDataIndex },
        ]"
        :style="{
          color: config.qNameColor,
          'background-color':
            index == showDataIndex ? config.qNameActiveColor : undefined,
        }"
        @click="handleQClick(index)"
      >
        {{ item.name }}
      </div>
    </template>
    <div class="l-rblock" :style="{'padding-top':config.isSummary?'86px':undefined}" >
      <div v-if="config.isSummary" class="learun-echarts-tag" >
        <div class="learun-echarts-tag-content">
          <div class="learun-echarts-tag-num" >{{summaryNum.toFixed(2)}}{{config.summaryUnit}}</div>
          <div class="learun-echarts-tag-label" >{{config.summaryLabel}}</div>
        </div>
        
      </div>
      <div class="l-rblock" >
         <l-echarts ref="main"></l-echarts>
      </div>
    </div>
   
  </l-data-panel>
</template>
<script>
import mixin from "../chart";
export default {
  mixins: [mixin()],
  data() {
    return {
      option: {},
      summaryNum:0
    };
  },
  methods: {
    getOption() {
      this.summaryNum  = 0;
      const { dataList } = this.config;
      const { isX, xAxis, yAxis } = this.echarts;
      const series = [];
      let myXAxis, myYAxis;
      if (isX) {
        // 如果设置横向
        myXAxis = this.setY(yAxis);
        myYAxis = this.setX(xAxis);
      } else {
        //纵向，默认
        myXAxis = this.setX(xAxis);
        myYAxis = this.setY(yAxis);
      }

      // 数据加载
      const data = this.showData || [];
      const { labelKey, valueKeys } = dataList[this.showDataIndex];
      //const color = [];
      const legend = [];
      if (labelKey) {
        const seriesMap = {};
        data.forEach((item, dIndex) => {
          valueKeys.forEach((valueItem, index) => {
            const { n, k, t, y } = valueItem;
            // n名称 k字段，y轴，c颜色,t:类型 line 或 bar
            if (k) {
              seriesMap[index] = seriesMap[index] || {
                name: n,
                data: [],
                type: t == "bar" ? "bar" : "line",
                // 文本标签设置
                label: this.getLabel(this.label),
              };

              if (t == "bar") {
                this.setBar(seriesMap[index], this.series.bar, valueItem);
              } else if (t == "pictorialBar") {
                this.setPictorialBar(
                  seriesMap[index],
                  this.series.pictorialBar,
                  valueItem
                );
              } else {
                this.setLine(seriesMap[index], this.series.line, valueItem);
              }

              const dataItem = [];
              if (isX) {
                dataItem.push(item[k]);
                dataItem.push(item[labelKey]);
                if (y && yAxis.length > y) {
                  seriesMap[index].xAxisIndex = y;
                }
              } else {
                dataItem.push(item[labelKey]);
                dataItem.push(item[k]);
                if (y && yAxis.length > y) {
                  seriesMap[index].yAxisIndex = y;
                }
              }

              seriesMap[index].data.push(dataItem);

              this.summaryNum += item[k];
            }
            if (dIndex == 0) {
              /*if (c) {
                color.push(c);
              }*/
              const legendItem = { name: n };
              if (
                this.legend.itemIcon == "none" ||
                (t == "bar" && this.legend.itemIcon)
              ) {
                legendItem.icon = this.legend.itemIcon;
              }
              legend.push(legendItem);
            }
          });
        });

        for (const key in seriesMap) {
          series.push(seriesMap[key]);
        }
      }

      // 图例设置
      this.option.legend = this.getLegend();
      this.option.legend.data = legend;

      // 颜色设置
      /*if (color && color.length > 0) {
        this.option.color = color;
      }*/

      // 设置指示类型
      this.option.tooltip = this.setToolTip(this.echarts.tooltip);

      if (this.echarts.grid) {
        this.option.grid = this.getGrid(this.echarts.grid);
      }

      this.option.xAxis = myXAxis;
      this.option.yAxis = myYAxis;
      this.option.series = series;
      //console.log(this.option);

      return this.option;
    },
    setX({
      type,
      axisLine,
      position,
      axisLabel,
      name,
      nameLocation,
      nameTextStyle,
    }) {
      const axis = {
        type: type || "category",
        axisLine: axisLine,
        axisLabel: {},
        name,
        nameLocation,
        nameTextStyle,
      };

      if (this.echarts.isX) {
        if (position == 0) {
          axis.position = "left";
        } else if (position == 1) {
          axis.position = "right";
        }
      } else {
        if (position == 0) {
          axis.position = "bottom";
        } else if (position == 1) {
          axis.position = "top";
        }
      }
      if (axisLabel.formatter) {
        axis.axisLabel.formatter = axisLabel.formatter;
      }
      if (axisLabel.color) {
        axis.axisLabel.color = axisLabel.color;
      }
      return axis;
    },
    setY(settings) {
      const axisList = [];
      (settings || []).forEach(
        ({
          name, // 名称
          type,
          position, // 位置

          nameLocation, // 名称位置
          nameTextStyle,
          axisLine,
          axisLabel,
          min,
          max,
          interval, // 坐标轴的分割段数
        }) => {
          const axis = {
            name,
            type,
            nameLocation,
            nameTextStyle,
            axisLine,
            axisLabel: {},
          };
          if (axisLabel.formatter) {
            axis.axisLabel.formatter = axisLabel.formatter;
          }
          if (axisLabel.color) {
            axis.axisLabel.color = axisLabel.color;
          }

          if (min != undefined) {
            axis.min = min;
          }
          if (max) {
            axis.max = max;
          }
          if (interval) {
            axis.interval = interval;
          }

          if (this.echarts.isX) {
            if (position == 0) {
              axis.position = "bottom";
            } else if (position == 1) {
              axis.position = "top";
            }
          } else {
            if (position == 0) {
              axis.position = "left";
            } else if (position == 1) {
              axis.position = "right";
            }
          }

          axisList.push(axis);
        }
      );

      return axisList;
    },
    setBar(config, { barWidth, isStack, label }, { c, c2, e, ec1, ec2 }) {
      config.barWidth = barWidth;
      if (isStack) {
        config.stack = "all";
      }

      config.label = label;

      config.itemStyle = {
        color: this.getColor(c, c2),
      };

      if (e) {
        config.emphasis = {
          disabled: false,
          itemStyle: {
            color: this.getColor(ec1, ec2),
          },
        };
      }
    },
    setLine(
      config,
      { smooth, isArea, areaColorStart, areaColorEnd, isStack, showSymbol },
      {c,isA,ac1,ac2} // 颜色，是否是面积图,面积开始颜色，面积结束颜色
    ) {
      config.smooth = smooth;
      if (isArea || isA) {
        config.areaStyle = {};

        if (!areaColorStart) {
          areaColorStart = ac1 || c;
        }

        config.areaStyle.color = this.getColor(ac1 || areaColorStart, ac2 || areaColorEnd);
      }

      if (isStack) {
        config.stack = "all";
      }

      if (c) {
        config.itemStyle = {
          color: c,
        };
      }

      config.showSymbol = showSymbol;
    },
    setPictorialBar(config, { barWidth }, { c, c2, e, ec1, ec2 }) {
      config.barWidth = barWidth;
      config.symbol =
        "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z";
      config.type = "pictorialBar";

      config.itemStyle = {
        color: this.getColor(c, c2),
      };

      if (e) {
        config.emphasis = {
          disabled: false,
          itemStyle: {
            color: this.getColor(ec1, ec2),
          },
        };
      }
    },
    setToolTip({ trigger, axisPointer }) {
      const toolTip = {
        trigger: trigger || "axis",
        axisPointer,
      };
      return toolTip;
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/core/styles/variables.scss";
.learun-bi-panel-title-item {
  padding: 0 8px;
  line-height: 24px;
  margin-right: 8px;
  cursor: pointer;
  color: $text-color;

  &:hover {
    background-color: $background-color;
  }

  &.active {
    background-color: $primary-color;
    color: #fff !important;
  }
}

.learun-echarts-tag{
  position: absolute;
  height: 86px;
  padding: 20px 24px;
  width: 100%;
  top:0;
  left: 0;
  &-content{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    align-items: center;

  }
  &-num{
    font-size: 30px;
    color: #5E95FF;
  }
  &-label{
    font-size: 18px;
    color: #707070;
  }
}
</style>
